<template>
    <div>
        <el-card>
            <el-container>
                <div>
                    <div v-if="roleId!==10" style="padding: 0px 20px 0px 20px">
                        <span style="margin-left: 15px">车库选择：</span>
                        <el-select :value="pageSearch.clauses[1].value" v-model="pageSearch.clauses[1].value"
                                   :clearable="true"
                                   placeholder="选择车场">
                            <el-option  v-for="item in parkingOption"
                                        :key="item.id"
                                        :label="item.parkingName"
                                        :value="item.id"></el-option>
                        </el-select>
                        <span style="margin-left: 15px">停车状态：</span>
                        <el-select :value="pageSearch.clauses[0].value" v-model="pageSearch.clauses[0].value"
                                   :clearable="true"
                                   placeholder="选择停车状态">
                            <el-option  v-for="item in statusOption"
                                        :key="item.id"
                                        :label="item.valueDesc"
                                        :value="item.id"></el-option>
                        </el-select>
                        <span style="margin-left: 15px">用户类型：</span>
                        <el-select :value="pageSearch.clauses[2].value" v-model="pageSearch.clauses[2].value"
                                   :clearable="true"
                                   placeholder="选择车场">
                            <el-option  v-for="item in roleOption"
                                        :key="item.id"
                                        :label="item.remark"
                                        :value="item.id"></el-option>
                        </el-select>
                        <span style="margin-left: 15px">停车时间：</span>
                        <el-date-picker
                                v-model="pageSearch.clauses[3].value"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="起始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                        <el-button style="float: right" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                    </div>
                    <div style="padding: 20px 20px 0 20px">
                        <el-button  type="primary" size="mini" icon="el-icon-circle-plus" @click="dialog.isVisible = true">模拟未临时用户停车</el-button>
                        <el-button  type="danger" size="mini" icon="el-icon-close" @click="deleteRecord">批量删除记录</el-button>
                    </div>
                </div>
                <div style="padding: 0px 20px 0 20px">
                    <el-table
                            ref="orderTable"
                            v-loading="loading"
                            :data="tableData"
                            :header-cell-style="tableHeader"
                            @selection-change="handleSelectionChange"
                            :height="580"
                            border>
                        <el-table-column
                                type="selection"
                                width="35">
                        </el-table-column>
                        <el-table-column
                                prop="startTime"
                                label="开始时间"
                                sortable
                                :formatter="dateFormat"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="endTime"
                                label="结束时间"
                                sortable
                                :formatter="dateFormat"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="parkingName"
                                label="所属停车场">
                        </el-table-column>
                        <el-table-column
                                prop="carPlaceId"
                                label="车位Id">
                        </el-table-column>
                        <el-table-column
                                prop="plateNum"
                                label="车牌号"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="userTypeName"
                                label="用户类型"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="statusName"
                                label="停车状态"
                        >
                        </el-table-column>
                        <el-table-column
                                label="离开"
                                width="50"
                        >
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.orderId===null&&scope.row.status===30" size="mini" type="info" icon="el-icon-truck" @click="leave(scope.row)" circle></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-footer style="height: 30px">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="pageSearch.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </el-footer>
                <el-dialog
                title="模拟临时用户停车"
                :visible.sync="dialog.isVisible"
                >
                    <el-form v-model="parkingRecordModel" label-width="15%">
                        <el-form-item label="车库：">
                            <el-select :value="parkingRecordModel.parkingId" v-model="parkingRecordModel.parkingId"
                                       :clearable="true"
                                       @change="getCarPlaceOption"
                                       placeholder="选择车场">
                                <el-option  v-for="item in parkingOption"
                                            :key="item.id"
                                            :label="item.parkingName"
                                            :value="item.id"></el-option>
                            </el-select>
                            <span style="margin-left: 20px">车位：</span>
                            <el-select :value="parkingRecordModel.carPlaceId" v-model="parkingRecordModel.carPlaceId"
                                       :clearable="true"
                                       placeholder="选择车位">
                                <el-option  v-for="item in carPlaceOption"
                                            :key="item.id"
                                            :label="item.carPlaceTypeName"
                                            :value="item.id">
                                    <span style="float: left">编号：{{ item.id }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.carPlaceTypeName }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="车牌：">
                            <el-input v-model="parkingRecordModel.plateNum" style="width: 150px"></el-input>
                        </el-form-item>
                    </el-form>
                    <div style="text-align: center">
                        <el-button type="primary" @click="addRecord">入库</el-button>
                    </div>
                </el-dialog>
            </el-container>
        </el-card>
    </div>
</template>

<script>
    import Message from '../../components/messages/index'
    export default {
        name: "order",
        data(){
            return{
                tableHeader:{
                    "background-color":"#DCDFE6",
                    "height":"20px"
                },
                dialog:{
                    isVisible:false,
                    title:"",
                },
                parkingRecordModel:{
                    startTime:new Date(),
                    plateNum:"1",
                    parkingId:null,
                    carPlaceId:"1",
                },
                loading:false,
                parkingOption:[],
                carPlaceOption:[],
                carPlaceType:[],
                roleOption:[],
                statusOption:[],
                tableData:[],
                total:0,
                roleId:null,
                pageSearch:{
                    pageSize:10,
                    pageNum:1,
                    clauses:[ {
                        column:"status",
                        operation:"=",
                        value:null,
                    },{
                        column:"parkingId",
                        operation:"=",
                        value:null,
                    },{
                        column:"userType",
                        operation:"=",
                        value:null,
                    },{
                        column:"startTime",
                        operation:"between",
                        value:null,
                    },{
                        column:"parkingId",
                        operation:"in",
                        value:null,
                    }],
                    sortMap:{
                        createDatetime:"DESC"
                    }
                },
                parkingIdOfUser:[],
                multipleSelection:[]
            }
        },
        methods:{
            handleSelectionChange(val){
                this.multipleSelection = val;
            },
            dateFormat(row,column){
                let date=row[column.property];
                if (date === undefined||date ===null) {
                    return "";
                }
                return this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
            },
            addRecord(){
                this.$http.post("parkingRecord/add",this.parkingRecordModel).then((res)=>{
                    if(res.status===200){
                        Message.success("入库成功！");
                        this.parkingRecordModel.parkingId=null;
                        this.parkingRecordModel.carPlaceId=null;
                        this.parkingRecordModel.plateNum=null;
                        this.dialog.isVisible = false;
                        this.getRecordList();
                    }
                })
            },
            deleteRecord(){
                this.loading=true;
                if(this.multipleSelection.length===0){
                    Message.warning("请选择数据！")
                }else{
                    this.$http.post("parkingRecord/deleteRecord",this.multipleSelection).then((res)=>{
                        if(res.status===200){

                            this.getRecordList();
                            this.loading=false;
                        }
                    })
                }
            },
            leave(record){
                this.loading=true;
                this.$http.post("parkingRecord/update",record).then((res)=>{
                    if(res.status===200){
                        this.getRecordList();
                        this.loading=false;
                    }
                })
            },
            getRecordList(){
                this.$http.post("/parkingRecord/page",this.pageSearch).then(res=>{
                    if(res.status===200){
                        this.tableData=res.data.list;
                        this.total=res.data.total;
                        for(let i=0;i<this.tableData.length;i++){
                            for(let j=0;j<this.parkingOption.length;j++){
                                if(this.parkingOption[j]["id"]===this.tableData[i]["parkingId"]){
                                    this.tableData[i].parkingName=this.parkingOption[j]["parkingName"];
                                }
                            }
                        }
                        for(let i=0;i<this.tableData.length;i++){
                            for(let j=0;j<this.statusOption.length;j++){
                                if(this.statusOption[j]["id"]===this.tableData[i]["status"]){
                                    this.tableData[i].statusName=this.statusOption[j]["valueDesc"];
                                }
                            }
                        }
                        for(let i=0;i<this.tableData.length;i++){
                            for(let j=0;j<this.roleOption.length;j++){
                                if(this.roleOption[j]["id"]===this.tableData[i]["userType"]){
                                    this.tableData[i].userTypeName=this.roleOption[j]["remark"];
                                }
                            }
                        }

                    }
                });
            },
            search(){
                this.pageSearch.pageNum=1;
                this.getRecordList();
            },
            handleSizeChange(val){
                this.pageSearch.pageSize=val;
                this.getRecordList();
            },
            handleCurrentChange(val){
                this.pageSearch.pageNum=val;
                this.getRecordList();
            },
            getCarPlaceOption(){
                if(this.parkingRecordModel.parkingId==null){
                    this.carPlaceOption=[];
                    this.parkingRecordModel.carPlaceId=null;
                }else{
                    this.$http.get("carPlace/getCarPlaceByParkingId/"+this.parkingRecordModel.parkingId).then((res)=>{
                        if(res.status===200){
                            this.carPlaceOption=res.data;
                            for(let i=0;i<this.carPlaceOption.length;i++){
                                for(let j=0;j<this.carPlaceType.length;j++){
                                    if(this.carPlaceOption[i].carPlaceType===this.carPlaceType[j].id){
                                        this.carPlaceOption[i].carPlaceTypeName=this.carPlaceType[j].valueDesc;
                                    }
                                }
                            }
                        }
                    })
                }
            },
            getCarPlaceType(){
                this.$http.post("coder/getCoderByeCodeKey",{codeKey:"carPlaceType"}).then(res=>{
                    if(res.status===200){
                        this.carPlaceType=res.data
                    }
                });
            },
            init() {
                this.$http.get("/role/all").then((res)=>{
                    if(res.status===200){
                        this.roleOption=res.data;
                    }
                });
                this.$http.post("coder/getCoderByeCodeKey",{codeKey:"status"}).then(res=>{
                    if(res.status===200){
                        this.statusOption=res.data
                    }
                });
                let user = JSON.parse(localStorage.getItem('user'));
                this.roleId=user.roleId;
                if(this.roleId===1){
                    this.$http.get("/parking/getParkingNameAndIdIsUsed/1/").then(res=>{
                        if(res.status===200){
                            this.parkingOption=res.data;
                            this.getRecordList();
                        }
                    });
                }else if(this.roleId===2){
                    this.$http.get("/parking/getParkingOfUser/"+user.id).then(res=>{
                        if(res.status===200){
                            this.parkingOption=res.data;
                            for(let i=0;i<res.data.length;i++){
                                this.parkingIdOfUser.push(res.data[i].id);
                            }
                            console.log(this.parkingIdOfUser);
                            if(this.parkingIdOfUser.length>0){
                                this.pageSearch.clauses[4].value=this.parkingIdOfUser;
                            }else{
                                this.pageSearch.clauses[4].value=[-1];
                            }
                            this.getRecordList();
                        }
                    });
                }

            }
        },
        mounted() {
            this.init();
            this.getCarPlaceType();
        },
        components:{Message},
    }
</script>

<style scoped lang="less">
    .searchInput{
        width:100px;
        height: 20px;
        margin-left: 10px;
    }
</style>
